<!-- 这里只定义具体的按钮，开箱即用那种。 -->
<template>
    <span class="customBtnsList" v-if="show">
        <el-button type="primary" size="mini" v-if="type == 'search'" @click="searchClick"> <i class="el-icon-search"></i> 查询 </el-button>
        <el-button type="danger" size="mini" v-if="type == 'reset'" @click="resetClick">
            <i class="el-icon-refresh-right"></i>
            重置
        </el-button>

        <el-button type="danger" size="mini" v-if="type == 'delete'" @click="deleteClick">
            <i class="el-icon-delete"></i>
            {{ title ?? 删除 }}
        </el-button>
        <el-button type="success" size="mini" v-if="type == 'pledit'" @click="pleditClick">
            <i class="el-icon-edit"></i>{{ title ?? '批量编辑' }}
        </el-button>
        <el-button type="success" size="mini" v-if="type == 'edit'" @click="editClick"> <i class="el-icon-edit"></i> 修改</el-button>
        <el-button type="primary" size="mini" v-if="type == 'add'" @click="addClick">
            <i class="el-icon-plus"></i> {{ title ?? '新增' }}
        </el-button>
        <el-button type="success" size="mini" v-if="type == 'save'" @click="saveClick">
            <img src="@/assets/images/other/save.png" style="vertical-align: middle" />
            {{ title ?? '保存' }}
        </el-button>

        <el-button type="primary" size="mini" v-if="type == 'xiafa'" @click="xiafaClick">
            <img src="@/assets/images/other/xiafa.png" style="vertical-align: middle; width: 16px" />
            {{ title ?? '下发' }}
        </el-button>

        <el-button type="primary" size="mini" v-if="type == 'createUser'" @click="userClick('createUser')">
            <img src="@/assets/images/user/createUser.png" style="width: 12px" />
            开户</el-button
        >
        <el-button type="primary" size="mini" v-if="type == 'moreUser'" @click="userClick('moreUser')">
            <img src="@/assets/images/user/moreCreate.png" style="width: 12px" />
            批量开户</el-button
        >

        <el-button type="primary" size="mini" v-if="type == 'plOpr'" @click="userClick('plOpr')">
            <img src="@/assets/images/user/plOpr.png" style="width: 12px" />
            批量操作</el-button
        >
        <el-button type="primary" size="mini" v-if="type == 'systemParams'" @click="userClick('systemParams')">
            <img src="@/assets/images/user/systemParams.png" style="width: 12px" />
            系统参数</el-button
        >
        <el-button type="primary" size="mini" v-if="type == 'userParams'" @click="userClick('userParams')">
            <img src="@/assets/images/1021/用户参数.svg" style="width: 12px" />
            用户参数</el-button
        >
        <el-button
            type="primary"
            size="mini"
            v-if="type == 'tdd'"
            @click="userClick('tdd')"
            style="background-color: #83bd51; border-color: #83bd51"
        >
            <img src="@/assets/images/user/tdd.png" style="width: 12px" />
            通断电</el-button
        >

        <el-button type="primary" size="mini" v-if="type == 'mergeUser'" @click="userClick('mergeUser')">
            <img src="@/assets/images/user/merge.png" style="width: 12px" />
            合并账户</el-button
        >
        <el-button type="primary" size="mini" v-if="type == 'editUser'" @click="userClick('editUser')">
            <img src="@/assets/images/user/edit.png" style="width: 12px" />
            编辑账户</el-button
        >

        <el-button type="primary" size="mini" v-if="type == 'userRemove'" @click="userClick('userRemove')">
            <img src="@/assets/images/user/userZero.png" style="width: 12px" />
            注销账户</el-button
        >

        <el-button type="primary" size="mini" v-if="type == 'moneyChangeUser'" @click="userClick('moneyChangeUser')">
            <img src="@/assets/images/user/moneyChange.png" style="width: 12px" />
            账户透支额度调整</el-button
        >
        <el-button type="primary" size="mini" v-if="type == 'initUser'" @click="userClick('initUser')">
            <img src="@/assets/images/user/init.png" style="width: 12px" />
            账户初始化</el-button
        >
        <el-button type="primary" size="mini" v-if="type == 'userZero'" @click="userClick('userZero')">
            <img src="@/assets/images/user/userZero.png" style="width: 12px" />
            账户清零</el-button
        >

        <el-button type="primary" size="mini" v-if="type == 'plxh'" @click="plxhClick">
            <img src="@/assets/images/menuIcon/销户操作.png" style="width: 12px" />
            批量销户</el-button
        >

        <el-button type="success" size="mini" v-if="type == 'print'" @click="printClick">
            <i class="el-icon-printer"></i>
            {{ title ?? '打印' }}
        </el-button>

        <el-button
            type="primary"
            :style="{'background-color': color}"
            size="mini"
            v-if="type == 'custom'"
            @click="customClick"
            class="customBtn type0"
        >
            <i :class="icon"></i>
            {{ title }}</el-button
        >

        <el-button
            type="primary"
            :style="{'background-color': color}"
            size="mini"
            v-if="type == 'zk'"
            @click="customClick"
            class="customBtn type0"
        >
            <i class="bi bi-arrow-down-up"></i>
            展开</el-button
        >

        <el-button
            type="primary"
            :style="{'background-color': color}"
            size="mini"
            v-if="type == 'ss'"
            @click="customClick"
            class="customBtn type0"
        >
            <i class="bi bi-arrow-down-up"></i>
            收缩</el-button
        >

        <el-upload
            v-if="type == 'import'"
            style="display: inline-block"
            :on-success="
                (file, fileList) => {
                    handleChange(file, fileList)
                }
            "
            :on-error="
                (file, fileList) => {
                    handleChange(file, fileList)
                }
            "
            :action="importUrl"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
            :headers="getHeader()"
            accept=".xls, .xlsx"
        >
            <el-button type="primary" size="mini" @click="importClick"> <i class="el-icon-upload2"></i> {{ title ?? '导入' }} </el-button>
        </el-upload>

        <el-button type="primary" size="mini" v-if="type == 'download'" @click="downloadClick">
            <i class="el-icon-download"></i>
            {{ title ?? '下载' }}
        </el-button>
    </span>
</template>

<script>
import {PopupCommon} from '@/libs/popupCommon'
import {getToken} from '@/libs/util'
import {getButtonPower} from '@/libs/tools'
export default {
    name: 'customButton',
    /**
     * type按钮类型
     * 值：   查询：search，重置：reset，新增：add，保存：save ,自定义 custom  (title/icon/type/color必填)
     */
    props: {
        type: {
            require: true,
            type: String
        },
        title: {
            require: false,
            type: String
        },
        icon: {
            require: false,
            type: String
        },
        color: {
            require: false,
            type: String
        },
        // 导入的接口地址
        importUrl: {
            require: false,
            type: String
        }
    },
    watch: {
        // 路由改变，头部标题改变。
        $route: {
            handler(v) {
                this.show = getButtonPower(v.name, this.type)
            },
            immediate: true
        }
    },
    data() {
        return {
            show: false,
            headers: {}
        }
    },
    mounted() {},
    methods: {
        getHeader() {
            const userInfo = JSON.parse(localStorage.getItem('userInfo'))
            const Timestamp = parseInt(new Date().getTime() / 1000)
            const Nonce = parseInt(Math.random() * 1000000)
            let headers = {
                token: getToken() ? getToken() : '',
                LoginName: userInfo?.username ?? '',
                OrgId: userInfo?.orgId ?? '',
                // 随机数
                Nonce: Nonce,
                // 时间戳
                Timestamp: Timestamp
            }
            return headers
        },
        /** 文件选择后的操作 */
        handleChange(file, fileList) {
            if (file?.Code == 200) {
                const error = file.Message.Error
                const success = file.Message.Success
                PopupCommon.notify('success', `导入成功${success}条数据，失败${error}条数据。`)
                this.$emit('uploadSuccess', '')
            } else {
                PopupCommon.notify('error', '文件格式不正确，请检查文件内容是否正确。')
            }
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            )
        },
        /**
         * 查询点击，触发searchClick事件
         */
        searchClick() {
            this.$emit('searchClick', '')
        },
        /**
         * 重置点击，触发searchClick事件
         */
        resetClick() {
            this.$emit('resetClick', '')
        },
        deleteClick() {
            this.$emit('deleteClick', '')
        },
        /**
         * 新增点击，触发addClick事件
         */
        addClick() {
            this.$emit('addClick', '')
        },
        /**
         * 保存点击，触发saveClick事件
         */
        saveClick() {
            this.$emit('saveClick', '')
        },
        xiafaClick() {
            this.$emit('xiafaClick', '')
        },
        /**
         * 保存打印，触发printClick事件
         */
        printClick() {
            this.$emit('printClick', '')
        },
        plxhClick() {
            this.$emit('plxhClick', '')
        },
        userClick(type) {
            this.$emit(type, '')
        },
        // 批量编辑
        pleditClick() {
            this.$emit('pleditClick', '')
        },
        editClick() {
            this.$emit('editClick', '')
        },
        customClick() {
            this.$emit('customClick', this.title)
        },

        // 导入
        importClick() {
            this.$emit('importClick', '')
        },
        // 下载
        downloadClick() {
            this.$emit('downloadClick', '')
        }
    }
}
</script>

<style  lang="scss">
.customBtnsList {
    justify-content: center;
    align-items: center;
    display: flex;
    button {
        padding: 0 10px;
        line-height: 30px;
        span {
            display: flex;
            height: 100%;
            width: 100%;
            justify-content: center;
            align-items: center;
            img {
                height: 12px;
                width: 12px;
                margin-right: 4px;
            }
        }
    }

    .customBtn {
        color: #fff;
        border: none;
        // height: 28px;
    }
}
</style>
